<template>
  <div class="con">
    <to-back></to-back>
  
    <div class="box" @click="$router.push('/addressList')">
      <!-- 无地址 -->
      <div class="no_address" v-if="!address.username">
        <button>+点击完善收货地址</button>
      </div>
      <!-- 有地址 -->
      <div class="have_address" v-else>
        <span>{{address.username}}</span>
        <span>{{address.userphone}}</span>
        <p>
          <span>默认</span>
          <!-- <span>{{address.status}}</span> -->
          <span>{{address.location}}</span>
          <span>{{address.useraddress}}</span>
        </p>
      </div>
    </div>

    <!-- 购物车 -->
    <div class="item" v-for="(item) in list" :key="item.id">
      <van-card :price="item.price" :title="item.goodsname" :thumb="$pre + item.img">
        <template #tags>
          <span>{{ item.num }}</span>
        </template>
      </van-card>
    </div>

    <!-- 总价 -->
    <div style="font-size:0.4rem;">总价：{{countmoney}}元</div>

    <van-button type="primary" size="large" @click="confirm">确认订单</van-button>
  </div>
</template>

<script>
import { reqaddressList,reqOrder, reqShopList } from "../../http/http";
export default {
  data() {
    return {
      //1. 地址初始值
      address: {},
        // 3.购物车的数据
      list: [],
      countmoney: JSON.parse(sessionStorage.getItem("d")).countmoney
    };
  },
  methods: {
  
    toPay() {
      // 挑转到支付页面内
      this.$router.replace("/pay");
    }
  },
  mounted() {
    //2.一进页面就取值
    // 取出地址中的id值
    let addressId = this.$route.query.addressId;
    if (addressId) {
      // 发请求
      reqaddressList({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        id: addressId
      }).then(res => {
        if (res.data.code == 200) {
          this.address = res.data.list[0];
        }
      });
    } else {
      // 从购物车跳过来的
      // 发请求
      reqaddressList({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        status: 1
      }).then(res => {
        if (res.data.code == 200) {
          /*
          res.data.list null  这个用户没有地址  address={}
          res.data.list [{status:0},{status:0}] 这个用户有地址，没有默认地址  address={}
          res.data.list [{status:1},{status:1}]这个用户有地址，有默认地址  address=res.data.list[0]
          */
          if (!res.data.list) {
            this.address = {};
            return;
          }

          if (res.data.list.every(item => item.status == 0)) {
            this.address = {};
            return;
          }
          this.address = res.data.list[0];
        }
      });
    }
    // 5,去购物车
    let idstr = JSON.parse(sessionStorage.getItem("d")).idstr; //"13,14"
    let idarr = idstr.split(","); //["13","14"]
    // 循环数组，将请到的数据放入list中
    idarr.forEach(item => {
      reqShopList({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        id: item
      }).then(res => {
        if (res.data.code == 200) {
          this.list.push(res.data.list[0]);
        }
      });
    });
  },
  methods:{
      // 6.确认下单
    confirm() {
      reqOrder({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        countmoney: this.countmoney,
        countnumber: JSON.parse(sessionStorage.getItem("d")).countnumber,
        addressid: this.address.id,
        idstr: JSON.parse(sessionStorage.getItem("d")).idstr
      }).then(res => {
        if (res.data.code == 200) {
          this.$router.push("/pay?orderId=" + res.data.list.outTradeNo);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.con {
  margin-top: 0.8rem;
}
.box {
  height: 1.5rem;
  background-color: beige;
  width: 100vw;
  padding: 0.5rem 0 0 0;
}
.box button {
  border: none;
  display: block;
  width: 75%;
  height: 0.6rem;
  background-color: rgb(250, 218, 179);
  margin: 0 auto;
}
.have_address span {
  margin: 0 0.2rem;
}






.shop_list {
  height: 2.14rem;
}
.shop_list .product {
  display: flex;
}
.product_text {
  flex: 1;
}
.product_text h3 {
  font-size: 0.3rem;
  line-height: 0.5rem;
}
.product_text h4,
div {
  line-height: 0.4rem;
}
/* .product_text div{
  line-height: ;
} */
.main {
  margin-top: 0rem;
}

.product_left {
  width: 0.4rem;
}
.product_center {
  width: 2.6rem;
  height: 2.14rem;
}
.product_text button {
  border: none;
  background-color: #f2f2f2;
  text-align: center;
}

/deep/.van-button--info {
  border: none;
  // width: 0.8rem;
  height: 0.4rem;
  background: linear-gradient(#ff4400, #ef7158, #ef8877);
  color: #fff;
  font-size: 0.18rem !important;
  float: right;
}
.product_left img {
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.8rem;
}
.all_xuanze img {
  width: 0.4rem;
  height: 0.4rem;
}
.price_all {
  float: right;
  margin-right: 2rem;
  font-size: 0.3rem;
  color: #ff4400;
  font-weight: 800;
}
</style>